<template>
	<gracePage headerBG="#FFFFFF" footerBg="#FFFFFF" :headerIndex="999999" :bounding="false">
		<view slot="gHeader" class="grace-bg-white">
			<view class="grace-header-body grace-relative">
				<text class="grace-header-icons your-icon iconxiangzuo font-size-34" style="" @tap="navigateBackFn"></text>
				<!-- 中间内容 -->
				<view class="grace-header-content-noflex py-1-5 px-3 text-center"><text class="grace-h4 text-center font-size-36" style="font-size:36rpx;">商品详情</text></view>
				<!-- 消息按钮 -->
				<!-- #ifdef APP-PLUS -->
				<navigator url="/pages/message/msgPage/msgPage" hover-class="other-navigator-hover">
					<view class="grace-header-icons your-icon iconxiaoxi1"></view>
				</navigator>
				<!-- #endif -->
				<!-- #ifdef H5 || MP-WEIXIN -->
					<view class="grace-header-icons"></view>
				<!-- #endif -->
				<!-- <view class="grace-badge-point" style="top:15rpx; right:20rpx;"></view> -->
			</view>
		</view>
		<view slot="gBody" style="padding-bottom:100rpx;">
			<graceFullLoading :graceFullLoading="graceFullLoading" logoUrl="/static/images/shopLoding.png" text="" size="100%"></graceFullLoading>
			<!-- 轮播图 -->
			<swiper
				class="grace-swiper"
				autoplay="true"
				indicator-dots
				indicator-color="rgba(255, 255, 255, 1)"
				indicator-active-color="#1CA376"
				style="height:750rpx"
				interval="5000"
			>
				<swiper-item v-for="(item, index) in shopInfo.img" :key="index"><image class="swiper-img" :src="item.img_url" mode="widthFix"></image></swiper-item>
			</swiper>
			<!-- 价格 -->
			<view class="grace-product-padding">
				<view class="grace-space-between grace-flex-vcenter">
					<view>
						<view class="grace-flex" v-if="loginStatus">
							<text class="grace-product-price font-size-34" v-if="selectShopInfo.price">￥{{ selectShopInfo.price }}</text>
							<text class="grace-product-price font-size-34" v-else>￥{{ goods.shop_price  | discountFn(userInfo.discount)}}</text>
							<!-- <text class="grace-text-small grace-gray grace-line-through pl-2" style="padding-top: 12rpx;">￥{{ goods.shop_price }}</text> -->
						</view>
						<text class="grace-product-price font-size-34" v-else>￥{{goods.shop_price}}</text>
					</view>
					<view class="grace-nowrap font-size-26 grace-flex-center px-1 grace-tbr-large" style="background-color: #D1A970;" @click="openShare">
						<text class="font-size-28 pr-1 grace-white">分享给好友</text>
						<text class="grace-icons icon-share3 font-size-28 grace-white"></text>
					</view>
				</view>
				<text class="grace-product-title m-0 grace-bold">{{ goods.goods_name }}</text>
				<view class="grace-space-between grace-flex-vcenter">
					<text class="grace-text-small grace-gray">{{ goods.goods_brief }}</text>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<!-- sku -->
			<view class="px-2" v-if="products.length != 0">
				<view class="grace-list-items"  @tap="buyNow()">
					<view class="grace-list-body">
						<view class="grace-nowrap">
							<text class="grace-text grace-black6">已选：</text>
							<text class="grace-text">{{ selectShopInfo.selectText }}</text>
						</view>
					</view>
					<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<!-- 评论区 -->
			<view class="grace-comments px-2">
				<view class="grace-list-items grace-border-b">
					<view class="grace-list-body">
						<view class="grace-nowrap">
							<text class="grace-text grace-black6" v-if="commentCount === '0'">暂无评价</text>
							<text class="grace-text grace-black6" v-else>评价({{ commentCount }})</text>
						</view>
					</view>
					<view class="grace-nowrap" @click="commentList(goods.goods_id)" v-if="commentCount != '0'">
						<text class="grace-text ">查看全部</text>
						<text class="grace-list-arrow-right grace-icons icon-arrow-right"></text>
					</view>
				</view>
				<view class="grace-comments-items" v-for="(item, index) in commentContents" :key="index" v-if="index === 0">
					<image :src="item.user_picture" class="grace-comments-face"></image>
					<view class="grace-comments-body">
						<view class="grace-comments-header">
							<text class="grace-comments-header-text">{{ item.user_name }}</text>
							<text class="grace-comments-info-text">{{ item.add_time }}</text>
						</view>
						<text class="grace-comments-content">{{ item.content }}</text>
						<view class="grace-comments-imgs" v-if="item.img">
							<view class="grace-comments-image" v-for="(img, indexImg) in item.img" :key="indexImg">
								<image :src="img.comment_img" mode="widthFix" class="grace-comments-img" @click.stop="showImgs(index, indexImg)"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="grace-common-line"></view>
			<!-- 产品详情图 -->
			<view class="px-2">
				<view class="grace-list-items grace-border-b">
					<view class="grace-list-body">
						<view class="grace-nowrap"><text class="grace-text">产品详情图</text></view>
					</view>
					<view class="grace-nowrap"></view>
				</view>
				<view class="pb-2 pt-4" >
					<!-- <rich-text type="text" :nodes="shopInfo.goods[0].goods_desc | goodsHtml"></rich-text> -->
					<image style="margin-top: -20rpx;" :src="item" mode="widthFix" v-for="(item, index) in productImg" :key="index"></image>
				</view>
			</view>
			<!-- 属性选择 -->
			<graceBottomDialog :show="attrIsShow" @closeDialog="closeAttr" borderRadius="25rpx">
				<form @submit="attrSubmit" style="box-sizing:border-box; " class="grace-form" slot="content">
					<view style="padding:10rpx 25rpx;">
						<!-- 头部商品信息 -->
						<view class="grace-product-attr-info">
							<image class="grace-product-attr-info-image pt-2" mode="widthFix" :src="goods.goods_thumb"></image>
							<view class="grace-product-attr-info-body">
								<view class="grace-space-between grace-flex-vbottom">
									<view class="">
										<text class="grace-product-price font-size-24">￥</text>
										<text class="grace-product-price font-size-34">{{ selectShopInfo.price }}</text>
									</view>
									<view><text class="grace-icons icon-close" @tap="closeAttr" style="height: 20rpx;"></text></view>
								</view>
								<text class="grace-product-attr-info-stone">库存 : {{ selectShopInfo.inventory }}件</text>
								<text class="grace-product-attr-info-title">已选 : {{ selectShopInfo.selectText }}</text>
							</view>
						</view>
						<!-- 属性列表区 -->
						<scroll-view style="height:650rpx;" scroll-y>
							<view v-for="(item, index) in attrSkuArr" :key="index" class="grace-border-b py-2">
								<view class="grace-title">{{ item.name }}</view>
								<graceSelectTags selectedColor="#FF0036" :items="item.list" type="radio" @change="changeSelect($event, index)"></graceSelectTags>
							</view>
							<view class="grace-space-between grace-flex-vbottom pb-2">
								<view class="grace-margin-top"><text class="grace-title">购买数量</text></view>
								<view><graceNumberBox :value="buyNum" v-on:change="buyNumChange" :maxNum="selectShopInfo.inventory"></graceNumberBox></view>
							</view>
						</scroll-view>
					</view>
					<view class="">
						<button
							type="warn"
							style="background-color:#1CA376;"
							:disabled="buyNum === 0 ? true : false"
							v-show="buyStatus === 1"
							class="grace-button grace-border-radius"
							formType="submit"
						>
							立即购买
						</button>
						<button
							type="warn"
							style="background-color:#1CA376;"
							:disabled="buyNum === 0 ? true : false"
							v-show="buyStatus === 2"
							class="grace-button grace-border-radius"
							formType="submit"
						>
							{{buyNum === 0 ? '库存不足' : '加入购物车'}}
						</button>
					</view>
				</form>
			</graceBottomDialog>
			<!--  利用底部对话框插槽 + 宫格布局实现分享布局 -->
			<graceBottomDialog :show="shareShow" v-on:closeDialog="closeDialog" borderRadius="25rpx">
				<view class="grace-margin-top " slot="content" style="height: 430rpx;">
					<view class="grace-flex-center grace-grids grace-margin-top five ">
						<block v-for="(list, indexs) in shareList" :key="indexs">
							<view class="grace-grids-items shareBox" @click="shareFn(list.name)">
								<image
									class="grace-grids-icon-img"
									:src="list.img"
									mode="widthFix"
								></image>
								<text class="grace-grids-text pt-2">{{list.text}}</text>
							</view>
						</block>
					</view>
				</view>
			</graceBottomDialog>
		</view>
		<!-- 底部 -->
		<view class="grace-space-between grace-flex-vcenter grace-bg-white" slot="gFooter">
			<view class="grace-grids grace-nowrap" style="width:380rpx;">
				<navigator url="/pages/message/service/service" hover-class="other-navigator-hover">
					<view class="grace-grids-items grace-relative">
						<!-- <image src="/static/images/cat/Collection.png" mode="widthFix" style="width: 50rpx;height: 50rpx;"></image> -->
						<image src="/static/images/cat/serve.png" class="mt-1" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
						<text class="grace-grids-text grace-grids-text">客服</text>
					</view>
				</navigator>
				<view class="grace-grids-items grace-relative" @click="gotoCat">
					<image src="/static/images/cat/cat.png" class="mt-1" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
					<text class="grace-grids-text grace-grids-text">购物车</text>
				</view>
				<view class="grace-grids-items grace-relative" @click="editCollectionFn(loginStatus)">
					<image :src="isCollection ? '/static/images/cat/active_colletion.png' : '/static/images/cat/collection.png'" class="mt-1" mode="widthFix" style="width: 40rpx;height: 40rpx;"></image>
					<text class="grace-grids-text grace-grids-text " :class="{'grace-footer-active':isCollection}">收藏</text>
				</view>
			</view>
			<view class="grace-flex-end pr-2" style="width:460rpx;" v-if="goods.num === '0'">
				<button type="warn" class="my-footer-button-disabled grace-tbr-large" disabled>库存不足</button>
			</view>
			<view class="grace-flex-end pr-2" style="width:460rpx;" v-else>
				<text class="my-footer-button my-icon-bl grace-white" style="background-color:#D1A970;" @tap="buyNow()">立即购买</text>
				<text class="my-footer-button my-icon-br grace-white" style="background-color:#1CA376;" @tap="addCartFn()">加入购物车</text>
			</view>
		</view>
	</gracePage>
</template>
<script>
import gracePage from '@/graceUI/components/gracePage.vue';
import graceNavBar from '@/graceUI/components/graceNavBar.vue';
import graceBottomDialog from '@/graceUI/components/graceBottomDialog.vue';
import graceNumberBox from '@/graceUI/components/graceNumberBox.vue';
import graceSelectTags from '@/components/myVue/graceSelectTags.vue';
import graceFullLoading from "@/components/myVue/graceFullLoading.vue";
import tools from '@/common/js/tools.js';
import { mapState , mapMutations} from 'vuex';

var graceRichText = require('@/graceUI/jsTools/richText.js');
export default {
	data() {
		return {
			graceFullLoading : false,
			//详情数据
			shopId: 0,
			shopInfo: [],
			productImg: [],
			commentContents: [],
			commentCount: '',
			goods: [],
			orderGoods:[],
			attrSkuArr: [],
			selectedAll: [],
			selectedAllStr: '',
			products: [],
			buyStatus: 1,
			buyNum: 1,
			attrIsShow: false,
			// 存放已选中的商品信息
			selectShopInfo: {
				price: '',
				inventory: 1,
				selectText: '',
				product_id: '',
				goods_id: '',
				goods_number: ''
			},
			shareShow: false,
			shareList:[{
				img:"https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200727/6eb8ed792242f81a6c0629db7e4dfec1.png",
				text:"微信好友",
				name:"WXSceneSession",
			},
			{
				img:"https://img-cdn-qiniu.dcloud.net.cn/uploads/article/20200727/3fc9e15a76104e4d50eeab1348c5d3e0.png",
				text:"朋友圈",
				name:"WXSenceTimeline",
			}],
			// 收藏
			isCollection:false
			
		};
	},
	computed: {
		...mapState({
			loginStatus: state => state.user.loginStatus,
			userInfo: state => state.user.userInfo
		}),
		// 根据已选中的sku 显示相应的数据
		// 选中skus的索引
		checkedSkusIndex() {
			let index = this.products.findIndex(item => {
				return item.goods_attr === this.selectedAllStr;
			});
			return index;
		}
	},
	onLoad(e) {
		console.log('onload',e)
		if (e.id) {
			this.shopId = e.id;
		}
		this.__init();
	},
	watch: {
		selectedAllStr: function(newVal) {
			console.log('newVal', newVal);
			this.buyNum = 1;
			var prduct = this.products[this.checkedSkusIndex];
			console.log('prduct.goods_price',prduct)
			this.selectShopInfo.price = tools.accMul(+prduct.goods_price,(this.userInfo ? this.userInfo.discount : 1));
			this.selectShopInfo.inventory = parseInt(prduct.product_number);
			this.selectShopInfo.selectText = prduct.attr_value;
			this.selectShopInfo.product_id = prduct.product_id;
			this.selectShopInfo.goods_id = this.goods.goods_id;
			this.selectShopInfo.goods_price = prduct.goods_price;
			
			// 如果该商品没有库存就不能加入购物车
			if (parseInt(prduct.product_number) === 0) {
				this.buyNum = 0;
			}
			console.log('this.selectShopInfo', this.selectShopInfo);
		}
	},
	methods: {
		...mapMutations(['addCart']),
		async __init() {
			this.graceFullLoading = true;
			this.getInfo();
		},
		async getInfo() {
			let data = await this.$HTTP.post('/api/api.php', { act: 'get_goodsinfo', goods_id: this.shopId ,user_id:this.loginStatus? this.userInfo.user_id : 0});
			console.log('data’',data)
			if(data.error){
				this.graceFullLoading = true;
				return ;
			}
			this.shopInfo = data;
			// 详情的编辑 只展示图片
			this.commentContents = data.comment.list;
			this.commentCount = data.comment.count;
			this.goods = data.goods[0];
			this.orderGoods = data.goods;
			this.products = data.products;
			
			// 判断是否收藏
			this.isCollection = data.goods[0].is_collect === 1 ? true : false;
			this.filterHTML(data.goods[0].goods_desc);
			this.setSkuFn(data.attr);
			this.graceFullLoading = false;
		},
		// 分享
		share: function() {
			uni.showToast({ title: '请自行完善分享代码', icon: 'none' });
		},
		// 评论图片展示
		showImgs: function(commentsIndex, imgIndex) {
			var arr = this.commentContents[commentsIndex].img,
				arr2 = [];
			for (var i = 0; i < arr.length; i++) {
				arr2.push(arr[i].comment_img);
			}
			uni.previewImage({
				urls: arr2,
				current: arr2[imgIndex]
			});
		},
		//打开属性视图
		buyNow() {
			if (this.loginStatus) {
				// 设置添加购物车
				this.buyStatus = 1;
				/*
				   1.  无sku    有sku
				*/
				if (this.products.length === 0) {
					// this.noAttrSubmit();
					
					// 没有sku 直接购买
					// goods_number 代表购买数量
					this.orderGoods[0].goods_number = 1;
					// product_id == 0 代表没有商品规格
					this.orderGoods[0].product_id = 0;
					// 商品价格
					this.orderGoods[0].product_price = tools.accMul(this.goods.shop_price,this.userInfo.discount);
					var goods = JSON.stringify(this.orderGoods);
					uni.navigateTo({
						url: "/pages/order/orderInfo3/orderInfo3?goods="+encodeURIComponent(goods),
						complete:()=>{
							// this.preventStatus = true;
						}
					});
					return;
				} else {
					// let shopDes = this.selectShopInfo;
					// console.log(11111,shopDes)
					
					this.attrIsShow = true;
				}
				
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		},
		// 购物车
		addCartFn() {
			/*
			  1. 判断是否登录
			  2. 根据selectShopInfo是否有值判断
			       有值 -- 直接添加到购物车
				   无   -- 打开属性列表
			*/
			if (this.loginStatus) {
				// 设置添加购物车
				this.buyStatus = 2;
				if (this.products.length === 0) {
					this.noAttrSubmit();
					return;
				}
				this.attrIsShow = true;
			} else {
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		},
		// 关闭属性
		closeAttr: function() {
			this.attrIsShow = false;
		},
		changeSelect: function(e, index) {
			this.selectedAll[index] = e;
			// this.colorSelected = e;
			this.selectedAllStr = this.selectedAll.join('|');
		},

		// 购买数量变化
		buyNumChange: function(e) {
			var num = e[0],
				oldNum = parseInt(this.selectShopInfo.inventory);
			if (oldNum < num) return;
			else this.buyNum = num;
		},
		// 属性提交
		attrSubmit: function(e) {
			// 根据 this.buyStatus 判断 是加入购物车还是立即购买
			let shopDes = this.selectShopInfo;
			if (this.buyStatus === 1) {
				// goods_number 代表购买数量
				this.orderGoods[0].goods_number = this.buyNum;
				// product_id == 0 代表没有商品规格
				this.orderGoods[0].product_id = shopDes.product_id;
				// product_price 商品价格
				this.orderGoods[0].product_price = this.selectShopInfo.price;
				this.orderGoods[0].goods_price = this.selectShopInfo.goods_price;
				this.orderGoods[0].selectText = this.selectShopInfo.selectText;
				var goods = JSON.stringify(this.orderGoods);
				uni.navigateTo({
					url: "/pages/order/orderInfo3/orderInfo3?goods=" + encodeURIComponent(goods),
					complete:()=>{
						// this.preventStatus = true;
					}
				});
			} else {
				let options = {
					act: 'edit_cart',
					type: 'add',
					goods: [
						{
							goods_id: shopDes.goods_id,
							goods_number: this.buyNum,
							product_id: shopDes.product_id
						}
					]
				};
				this.$HTTP.postStatus('/api/api.php', options, { token: true }).then(res=>{
					if(res.result == 1002){
						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
						// shopDes.goods_name = this.goods.goods_name;
						// shopDes.goods_attr = shopDes.selectText;
						// shopDes.goods_price = shopDes.price;
						// shopDes.goods_number = this.buyNum;
						// shopDes.goods_number = this.buyNum;
						// shopDes.goods_img = this.goods.goods_thumb;
						// 通知购物车页面更新数据
						uni.$emit('updateCart')
						
					}
				});
			}
			//如果想关闭属性
			this.closeAttr();
		},
		//没有商品属性的商品提交
		noAttrSubmit() {
			let options = {
				act: 'edit_cart',
				type: 'add',
				goods: [
					{
						goods_id: this.goods.goods_id,
						goods_number: 1,
						product_id: 0
					}
				]
			},_this = this;
			
			this.$HTTP.postStatus('/api/api.php', options,{token:true}).then(res=>{
				if(res.result === 1002){
					uni.showToast({
						title: res.msg ,
						icon: 'none'
					});
					_this.goods.product_id = 0;
					// 通知购物车页面更新数据
					uni.$emit('updateCart')
					
				}
				
			});
		},
		filterHTML(HTML) {
			if(HTML == '') return ;
			//匹配图片（g表示匹配所有结果i表示区分大小写）
			var imgReg = /<img.*?(?:>|\/>)/gi;
			//匹配src属性
			var srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i;
			var arr = HTML.match(imgReg),
				arr2 = [];
			for (var i = 0; i < arr.length; i++) {
				var src = arr[i].match(srcReg);
				arr2.push(src[1]);
			}
			this.productImg = arr2;
		},
		// 回退事件
		navigateBackFn: function() {
			uni.navigateBack();
		},
		// 前往购物车
		gotoCat: function() {
			uni.switchTab({
				url: '/pages/cart/cart'
			});
		},
		// 重设 sku
		setSkuFn(obj) {
			var Obj = [],
				selectAll = [];
			for (let lists in obj) {
				var obj2 = {},
					arr = [];
				obj2.name = obj[lists].name;
				var oneObj = obj[lists].list[0];
				for (let i = 0; i < oneObj.length; i++) {
					if (i === 0) {
						selectAll.push(oneObj[i].goods_attr_id);
						arr.push({ name: oneObj[i].attr_value, value: oneObj[i].goods_attr_id, checked: true });
					} else {
						arr.push({ name: oneObj[i].attr_value, value: oneObj[i].goods_attr_id, checked: false });
					}
				}

				obj2.list = arr;
				Obj.push(obj2);
			}
			this.attrSkuArr = Obj;
			this.selectedAll = selectAll;
			this.selectedAllStr = selectAll.join('|');
		},
		// 分享
		openShare: function() {
			this.shareShow = true;
		},
		closeDialog: function() {
			this.shareShow = false;
		},
		// 分享到
		shareFn(type) {
		console.log('type',type)
			let pages = getCurrentPages(),_this = this;
			let route = pages[pages.length - 1].route;
			let ahref = this.$HTTP.common.baseUrl+'h5/#/pages/shop/shopInfo/shopInfo?id='+this.shopId;
			console.log(ahref,this.shopInfo.img[0].thumb_url)
			uni.share({
				provider: 'weixin',
				scene: type,
				type: 0,
				href: ahref,
				title: '臻之筱商品分享',
				summary: this.goods.goods_name,
				imageUrl: this.shopInfo.img[0].thumb_url,
				success: function(res) {
					// console.log('success:' + JSON.stringify(res));
					uni.showToast({
					    title: '已成功分享',
						icon:false,
					    duration: 2000
					});
				},
				fail: function(err) {
					console.log('err',err)
				},
				complete: function() {
					// 关闭分享
					_this.shareShow = false;
				}
			});
		},
		// 收藏
		editCollectionFn(status){
			// 判断当前用户是否登录
			if(status){
				let _this = this;
				// 判断是否收藏 
				if(this.isCollection){
					this.$HTTP.postStatus('/api/api.php', {act:"cancel_collect",goods_id:_this.shopId}, { token: true }).then((res)=>{
						if(res.result === 1002){
							_this.isCollection = false;
							uni.showToast({
								title: result.data.msg,
								position :'bottom',
								icon: 'none'
							});
						}else{
							uni.showToast({
								title: result.data.msg,
								position :'bottom',
								icon: 'none'
							});
						}
					})
				}else{
					this.$HTTP.postStatus('/api/api.php', {act:"add_collect",goods_id:_this.shopId}, { token: true }).then((res)=>{
						if(res.result === 1002){
							console.log('this.isCollection',_this.isCollection)
							_this.isCollection = true;
							uni.showToast({
								title: result.data.msg,
								position :'bottom',
								icon: 'none'
							});
						}else{
							uni.showToast({
								title: result.data.msg,
								position :'bottom',
								icon: 'none'
							});
						}
					})
				}
			}else{
				uni.navigateTo({
					url: '/pages/login/login'
				});
			}
		},
		// 查看全部评价
		commentList: function(id) {
			uni.navigateTo({
				url: '/pages/shop/shopInfoComment/shopInfoComment?id=' + id
			});
		}
	},
	filters: {
		discountFn(value,discount){
			if(value == '0.01') return value;
			return tools.accMul(+value,+discount);
		},
	},
	components: { gracePage, graceNavBar, graceBottomDialog, graceSelectTags, graceNumberBox ,graceFullLoading}
};
</script>
<style>
/* 修改样式 */
.swiper-img {
	width: 750rpx;
	height: 750rpx;
}
.grace-grids-items {
	padding: 6rpx 0;
	width: 90rpx;
}
.grace-grids-icon {
	height: 50rpx;
	line-height: 50rpx;
	font-size: 40rpx;
	color: #6b7375;
}
.grace-grids-text {
	line-height: 28rpx;
	font-size: 20rpx;
	margin-top: 2px;
	color: #a6a6a6;
}
.grace-footer-active {
	color: #ff0036;
}
.my-icon-br {
	border-top-right-radius: 40px;
	border-bottom-right-radius: 40px;
}
.my-icon-bl {
	border-top-left-radius: 40px;
	border-bottom-left-radius: 40px;
}
.icon-close {
	font-size: 30rpx;
	line-height: 80rpx;
	color: #888888;
}
.my-footer-button {
	width: 210rpx;
	height: 80rpx;
	font-size: 30rpx;
	text-align: center;
	line-height: 80rpx;
}
.my-footer-button-disabled {
	width: 420rpx;
	height: 80rpx;
	font-size: 30rpx;
	text-align: center;
	line-height: 80rpx;
}
/* 原本样式 */
.grace-common-line {
	height: 16rpx;
}
.grace-product-padding {
	padding: 20rpx 25rpx;
}
.grace-product-title {
	line-height: 44rpx;
	font-size: 28rpx;
}
.grace-product-share {
	width: 80rpx;
	height: 80rpx;
	text-align: center;
	font-size: 40rpx;
	color: #f0282a;
	line-height: 80rpx;
	flex-shrink: 0;
	margin-left: 12px;
}
.grace-product-share:after {
	width: 0;
	height: 0;
}
.grace-product-price {
	color: #f0282a;
	line-height: 60rpx;
	/* font-size: 30rpx; */
	font-weight: bold;
}
.grace-product-info-img {
	width: 100%;
}
.grace-product-attr-info {
	overflow: hidden;
	display: flex;
	justify-content: space-between;
	border-bottom: 1px solid #f1f1f3;
	padding-bottom: 26rpx;
}
.grace-product-attr-info-image {
	width: 120rpx;
	height: auto;
	margin-right: 10px;
	flex-shrink: 0;
}
.grace-product-attr-info-body {
	width: 700rpx;
}
.grace-product-attr-info-title {
	width: 100%;
	font-size: 28rpx;
	color: #333333;
	display: block;
}
.grace-product-attr-info-stone {
	width: 100%;
	font-size: 24rpx;
	margin-top: 8rpx;
	color: #666666;
	display: block;
}

.grace-grids-icon {
	height: 50rpx;
	line-height: 50rpx;
	font-size: 40rpx;
	color: #6b7375;
}
.grace-grids-text {
	line-height: 28rpx;
	font-size: 20rpx;
	margin-top: 2px;
	color: #6b7375;
}
.grace-footer-active {
	color: #ff0036;
}
.shareBox{
	width: 30%;
}
</style>
